import { Route, Switch } from "react-router-dom";
import React, { Component } from "react";
import Films from "../views/films";
import Cinemas from "../views/cinemas";
import Center from "../views/center";
import NotFound from "../views/notfound";
import Detail from "../views/detail";
import Login from "../views/login";
import search from "../views/search";
import {
  BrowserRouter,
  Redirect,
} from "react-router-dom/cjs/react-router-dom.min";
import City from "../views/City";
function isAuth() {
  //判断本地存储是否有用户信息token 没有调用时候就跳转到登录页面 有就跳转到我的页面
  return localStorage.getItem("token") && localStorage.getItem("password");
}
export default class IndexRouter extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      // Routes只匹配一个 react-router-dom6以上 5以下是switch 同理在 react router v6 中，我们不向 Route 组件传递 children 属性，而是使用 element 属性。例如，<Route path="/about" element={<About />} />。

      // 当使用react router时，请确保将应该为特定路由渲染的组件作为<Component />，而不是Component。
      <div>
        {/* <HashRouter>
          <Routes>
            <Route element={<Home />} exact strict path="/" />
            <Route element={<About />} exact path="/about" />
            <Route element={<News />} exact path="/news" />
          </Routes>
        </HashRouter> */}

        <BrowserRouter>
          {this.props.children}
          <Switch>
            <Route component={Films} path="/films" />
            {/* 跳子路由要加精准匹配exact
            <Route
              component={NowPlaying}
              exact
              strict
              path="/films/nowPlaying"
            /> */}
            <Route component={Cinemas} exact path="/cinemas" />
            <Route component={search} exact path="/cinemas/search" />
            {/* <Route component={Center} exact path="/center" /> */}
            {/* <Route
              render={(props) => {
                // ...组件传值
                return isAuth() ? (
                  <Center myname="lzq2022" mypass="tuantuan" {...props} />
                ) : (
                  <Redirect to="/login" />
                );
              }}
              path="/center"
            /> */}
            {/* 用withrouter传值 这里就不用。。。props了 */}
            <Route
              render={(props) => {
                // ...组件传值
                return isAuth() ? (
                  <Center myname="lzq2022" mypass="tuantuan" />
                ) : (
                  <Redirect to="/login" />
                );
              }}
              path="/center"
            />
            {/* 如果自己切换话会 to重定向到login */}
            <Route component={Login} path="/login" />
            <Route component={City} path="/city" />
            {/* 动态路由 /detail/:myid必须要有冒号 占位符 */}
            <Route component={Detail} path="/detail/:myid" />
            {/* 也可以query传参 */}
            {/* <Route component={Detail} path="/detail" /> */}
            {/* to路由重定向
            exact为精准匹配
            */}
            <Redirect from="/" to="films" exact />
            <Route component={NotFound}></Route>
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}
